<template>
  <div>
    <!--    编辑/添加表单-->
    <!--    编辑/添加表单-->
    <!--    编辑/添加表单-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="40%" resetFields>
      <el-form :model="updateAll" :rules="unitMeasureRules" ref="unitMeasureRulesForm">
        <el-form-item label="eltId" prop="eltId" v-show="false">
          <el-input v-model="updateAll.eltId" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="品名/SkU" prop="brandName">
          <el-input v-model="updateAll.brandName" autocomplete="on" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="店铺" prop="shop">
          <el-input v-model="updateAll.shop" autocomplete="on" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="国家" prop="country">
          <el-input v-model="updateAll.country" autocomplete="on" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="cateGory">
          <el-input v-model="updateAll.cateGory" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="品牌" prop="productName">
          <el-input v-model="updateAll.productName" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="updateAll.price" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="FBA可售" prop="fbaAvailable">
          <el-radio-group v-model="updateAll.fbaAvailable">
            <el-radio label="是">是</el-radio>
            <el-radio label="否">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="销量" prop="sales">
          <el-input v-model="updateAll.sales" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="销售额" prop="revenue">
          <el-input v-model="updateAll.revenue" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="广告费" prop="advertisingFee">
          <el-input v-model="updateAll.advertisingFee" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="completed">
          <el-radio-group v-model="updateAll.completed">
            <el-radio label="1">在售</el-radio>
            <el-radio label="2">停售</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="负责人" prop="responsiblePerson">
          <el-input v-model="updateAll.responsiblePerson" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateMeasure('unitMeasureRulesForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--    下拉查询-->
    <!--    下拉查询-->
    <!--    下拉查询-->
    <el-form :inline="true" :model="unitMeasure">
      <el-select v-model="unitMeasure.country" size="small" placeholder="请选择国家" :clearable="true"
                 @change="findCountry" style="margin-left: 20px;">
        <el-option
          v-for="item in listData"
          :key="item.value"
          :label="item.country"
          :value="item.country">
        </el-option>
      </el-select>
      <el-select v-model="unitMeasure.shop" size="small" placeholder="请选择店铺" :clearable="true"
                 @change="findCountry" style="margin-left: 20px;margin-right: 20px">
        <el-option
          v-for="item in listData"
          :key="item.value"
          :label="item.shop"
          :value="item.shop">
        </el-option>
      </el-select>
      <!--      添加&批量删除-->
      <!--      添加&批量删除-->
      <!--      添加&批量删除-->
      <el-button size="small" type="danger" icon="el-icon-delete" @click="delMore">删除</el-button>
      <el-button size="small" type="primary" icon="el-icon-edit" @click="add">添加</el-button>
    </el-form>

    <!--    表单-->
    <!--    表单-->
    <!--    表单-->
    <el-table v-loading="loading" :data="measureList" @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column label="品名/SkU" align="center" prop="brandName"/>
      <el-table-column label="店铺" align="center" prop="shop"/>
      <el-table-column label="国家" align="center" prop="country"/>
      <el-table-column label="分类" align="center" prop="cateGory"/>
      <el-table-column label="品牌" align="center" prop="productName"/>
      <el-table-column label="价格" align="center" prop="price"/>
      <el-table-column label="FBA可售" align="center" prop="fbaAvailable">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.fbaAvailable === '是' ? 'primary' : 'danger'"
            disable-transitions>{{ scope.row.fbaAvailable === '是' ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="销量" align="center" prop="sales"/>
      <el-table-column label="销售额" align="center" prop="revenue"/>
      <el-table-column label="广告费" align="center" prop="advertisingFee"/>
      <el-table-column label="排名" align="center" prop="rank"/>
      <el-table-column label="状态" align="center" prop="completed">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.completed == '1' ? 'primary' : 'danger'"
            disable-transitions>{{ scope.row.completed == '1' ? '在售' : '停售' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="负责人" align="center" prop="responsiblePerson"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <span class="demonstration"/>
    <el-pagination
      style="margin-right: 14px; margin-top: 10px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 7, 10,15,20]"
      :page-size="5"
      layout=" ->, total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import {addFind, delById, delMore, getList, upMeasure} from "@/api/sell"


export default {
  name: 'SellIndex',
  data() {
    return {
      measureList: [],
      ids: [],
      loading: true,
      pageNum: 1,
      currentPage: 1,
      total: 0,
      pageSize: 5,
      title: '',
      dialogFormVisible: false,
      listData: [],
      unitMeasureRules: {
        brandName: [
          {required: true, message: '请输入品名/SKU', trigger: 'blur'}
        ],
        shop: [
          {required: true, message: '请输入店铺名称', trigger: 'blur'}
        ],
        country: [
          {required: true, message: '请输入国家名称', trigger: 'blur'}
        ],
        primaryFlag: [
          {required: true, message: '请确认FBA可售', trigger: 'blur'}
        ],
      },
      // 编辑,数据回显
      // 编辑,数据回显
      // 编辑,数据回显
      updateAll: {
        advertisingFee: '',
        brandName: "",
        cateGory: null,
        completed: null,
        country: "",
        createBy: null,
        createTime: null,
        eltId: null,
        fbaAvailable: "",
        price: null,
        productName: null,
        rank: null,
        responsiblePerson: '',
        revenue: null,
        sales: null,
        shop: "",

      },
      // 下拉查询
      // 下拉查询
      // 下拉查询
      unitMeasure: {
        responsiblePerson: '',
        eltId: null,
        country: null,
        shop: null
      },
    }
  },
  methods: {

    fetchData() {
      let params = {
        pageNum: this.pageNum,// 分页
        pageSize: this.pageSize,// 每页数据数量
        country: this.unitMeasure.country,
        eltId: this.unitMeasure.eltId,
        shop: this.unitMeasure.shop
      }
      getList(params).then(res => {

        let pageInfo = res.data
        this.loading = false
        this.measureList = pageInfo.list
        this.listData = pageInfo.list
        this.total = pageInfo.total
      })
    },
    // 下拉框查询
    // 下拉框查询
    // 下拉框查询
    findCountry() {
      let params = {
        pageNum: this.pageNum,// 分页
        pageSize: this.pageSize,// 每页数据数量
        country: this.unitMeasure.country,
        eltId: this.unitMeasure.eltId,
        shop: this.unitMeasure.shop
      }
      getList(params).then(res => {

        let pageInfo = res.data
        this.loading = false
        this.measureList = pageInfo.list

      })

    },
    // 多选框ID
    // 多选框ID
    // 多选框ID
    handleSelectionChange(selection) {
      this.ids = []
      for (let i = 0; i < selection.length; i++) {
        this.ids.push(selection[i].eltId)
      }
    },

    // 编辑
    // 编辑
    // 编辑
    handleUpdate(row) {

      this.updateAll = row
      this.dialogFormVisible = true
      this.title = '编辑'
    },
    // 添加
    // 添加
    // 添加
    add() {
      this.updateAll = {}
      this.dialogFormVisible = true
      this.title = '添加'
    },
    updateMeasure(forName) {
      this.$refs[forName].validate((valid) => {
        if (valid) {
          if (this.title === "编辑") {
            upMeasure(this.updateAll).then(res => {
              alert('编辑成功!')
              this.fetchData()
            })
          } else if (this.title === "添加") {
            addFind(this.updateAll).then(res => {
              alert('添加成功!')
              this.fetchData()
            })
          }
        } else {
          return false
        }
        this.dialogFormVisible = false
      })
    },
    // 删除
    // 删除
    // 删除
    handleDelete(row) {
      this.$confirm('此操作将永久删除 ' + row.brandName + ' 单位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: row.eltId
        }
        delById(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 批量删除
    // 批量删除
    // 批量删除
    delMore() {
      this.$confirm('此操作将永久删除 ' + this.ids + ' 单位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          ids: this.ids.join(',')
        }

        delMore(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },


    // 分页
    // 分页
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.fetchData()
    },
  },
  created() {
    this.fetchData()
  }
}
</script>

<style scoped lang="scss">

</style>
